<template>
  <div id="dsManagePage" style="margin-left: 15px">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="padding: 12px 12px"
    >
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据源管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据源列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card
      shadow="hover"
      style="margin-bottom: 15px; min-height: 580px; margin-right: 15px"
    >
      <el-row :gutter="20" style="margin: 12px 0">
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <el-input
            v-model="queryInfo.keyword"
            placeholder="请输入内容搜索"
            :prefix-icon="Search"
            class="w-50 m-2"
          >
            <template #append>
              <el-button :icon="Search" @click="handleSearch" />
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog"
            >添加数据源</el-button
          >
        </el-col>
      </el-row>
      <!-- 数据源列表区域  -->
      <el-table
        :data="dsList"
        v-loading="queryLoading"
        border
        stripe
        table-layout="auto"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="名称" prop="nickname"></el-table-column>
        <el-table-column label="JDBC驱动" prop="jdbcDriver"></el-table-column>
        <el-table-column label="主机IP" prop="host"></el-table-column>
        <el-table-column label="端口" prop="port"></el-table-column>
        <el-table-column label="用户名" prop="user"></el-table-column>
        <el-table-column label="密码" prop="pwd"></el-table-column>
        <el-table-column label="实例(数据库)名" prop="schemaName"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页面区域 -->
      <el-pagination
        style="margin: 15px 0"
        :current-page="queryInfo.currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>

    <!-- 弹窗表单 -->
    <el-dialog v-model="addDialogFormVisible" title="添加数据源">
      <el-form :model="dsForm" v-loading="saveLoading" :inline="true">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="dsForm.nickname" autocomplete="true" />
        </el-form-item>
        <el-form-item label="JDBC驱动" :label-width="formLabelWidth">
          <el-input v-model="dsForm.jdbcDriver" autocomplete="true" />
        </el-form-item>
        <el-form-item label="主机IP" :label-width="formLabelWidth">
          <el-input v-model="dsForm.host" autocomplete="off" />
        </el-form-item>
        <el-form-item label="端口" :label-width="formLabelWidth">
          <el-input v-model="dsForm.port" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="dsForm.user" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="dsForm.pwd" autocomplete="off" />
        </el-form-item>
        <el-form-item label="实例(数据库)名" :label-width="formLabelWidth">
          <el-input v-model="dsForm.schemaName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { to, httpPost, httpGet } from "@/repository/network/";
import { isEmpty } from "@/util/string-util";

const queryInfo = reactive({
  keyword: "", // 查询参数
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示条数
});
const dsList = ref([]);
// 总数据条数
const total = ref(0);

// 新建对话框表单是否显示
const addDialogFormVisible = ref(false);
const dsForm = ref({});
const formLabelWidth = "100px";
const saveLoading = ref(false);
const queryLoading = ref(true);

onMounted(() => {
  getDsList();
});

function showAddDialog() {
  addDialogFormVisible.value = true;
}

async function handleAdd() {
  saveLoading.value = true;
  const { resp, error } = await to(
    httpPost("/admin/ds/addOrUpdate", dsForm.value)
  );
  saveLoading.value = false;
  if (resp?.code != 200) {
    ElMessage.error("保存失败");
    return;
  }
  await getDsList();
  ElMessage.success("保存成功！");
  addDialogFormVisible.value = false;
  dsForm.value = {};
}

async function getDsList() {
  queryLoading.value = true;
  const { resp, error } = await to(httpPost("/admin/ds/paging", queryInfo));
  queryLoading.value = false;
  if (resp?.code != 200) {
    ElMessage.error("加载数据源列表时出错");
    return;
  }
  dsList.value = resp?.data?.data?.records;
  dsList.value = resp?.data?.data?.records;
  total.value = resp?.data?.data?.total;
}

async function handleSearch() {
  getDsList();
}
function handleEdit(index: number, row: any) {
  dsForm.value = row;
  addDialogFormVisible.value = true;
}
function handleDelete(index: number, row: any) {
  ElMessageBox.confirm("将永久删除此项，确定删除?", "警告", {
    distinguishCancelAndClose: true,
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const deleteSuccess = await requestDelete(row?.id);
      if (deleteSuccess) {
        await getDsList();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}

async function requestDelete(id?: string): Promise<boolean> {
  if (!id) {
    return false;
  }
  const { resp, error } = await to(httpGet("/admin/ds/remove", { id }));
  return resp?.code == 200;
}

// 监听 page size 改变的事件
function handleSizeChange(newSize: number) {
  queryInfo.pageSize = newSize;
  getDsList();
}
// 监听 页码值 改变的事件
function handleCurrentChange(newPage: number) {
  queryInfo.currentPage = newPage;
  getDsList();
}
</script>

<style>
</style>